<template>
  <el-table
    :data="ptableDate"
    align="center"
    border
    :span-method="objectOneMethod"
    >
    <el-table-column align="center" show-overflow-tooltip label="projName" prop="projName" ></el-table-column>
    <el-table-column align="center" show-overflow-tooltip label="dirtySection" prop="dirtySection" ></el-table-column>
    <el-table-column align="center" show-overflow-tooltip label="towerNumber" prop="towerNumber" ></el-table-column>
    <el-table-column align="center" show-overflow-tooltip prop="inclination" ></el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "AutoHeightTable",
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    };
    return {
      tableData: Array(100).fill(item),
      height: "200px",
      ptableDate: [
        {
          projName: '王小虎',
          dirtySection: 'tete',
          towerNumber: '11',
          inclination: '324'
          
        },
        {
          projName: '王小虎',
          dirtySection: 'tete1',
          towerNumber: '12',
          inclination: '324'
        },
        {
          projName: '王小虎1',
          dirtySection: 'tete2',
          towerNumber: '13',
          inclination: '325'
        },
        {
          projName: '王小虎1',
          dirtySection: 'tete2',
          towerNumber: '14',
          inclination: '325'
        },
      ],
    };
  },
  mounted() {
    this.getAutoHeight();
    const self = this;
    window.onresize = function() {
      self.getAutoHeight();
    };
  },
  methods: {
    getAutoHeight() {
      let el = document.querySelector("#tableData"),
        elParent = el.parentNode,
        pt = this.getStyle(elParent, "paddingTop"),
        pb = this.getStyle(elParent, "paddingBottom");
      this.$nextTick(() => {
        this.height = elParent.clientHeight - (pt + pb) + "px";
      });
    },
    getStyle(obj, attr) {
      // 兼容IE浏览器
      let result = obj.currentStyle
        ? obj.currentStyle[attr].replace("px", "")
        : document.defaultView
            .getComputedStyle(obj, null)[attr].replace("px", "");
      return Number(result);
    },
    objectOneMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 3) {
        const _row = this.setTable(this.ptableDate).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 1 ) {
        const _row = this.setTable(this.ptableDate).two[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
        rowspan: _row,
        colspan: _col
        };
      }
    },
    setTable(tableData) {
      let spanOneArr = [],
      spanTwoArr = [],
      concatOne = 0,
      concatTwo = 0;
      tableData.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
          spanTwoArr.push(1);
        } else {
          if (item.projName === tableData[index - 1].projName) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
          if (item.dirtySection === tableData[index - 1].dirtySection) {
            //第二列和需合并相同内容的判断条件
            spanTwoArr[concatTwo] += 1;
            spanTwoArr.push(0);
          } else {
            spanTwoArr.push(1);
            concatTwo = index;
          }
        }
      });
      return {
        one: spanOneArr,
        two: spanTwoArr
      };
    },
  }
};
</script>
<style>
.layout {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-main {
  overflow: hidden !important;
}
</style>